<template>
	<view class="container">
		<!-- 菜单表格 -->
		<view class="menu-table">
			<!-- 表头 -->
			<view class="table-header">
				<view class="th">菜品图片</view>
				<view class="th">菜品名称</view>
				<view class="th">价格</view>
				<view class="th">状态</view>
				<view class="th">操作</view>
			</view>

			<!-- 表格内容 -->
			<view v-for="item in menuList" :key="item.itemId" class="table-row">
				<view class="td">
					<image class="dish-img" :src="item.imageUrl" mode="aspectFill" />
				</view>
				<view class="td">{{ item.name }}</view>
				<view class="td">¥{{ item.price }}</view>
				<view class="td">
					<view :class="['status-tag', statusMap[item.state].class]">
						{{ statusMap[item.state].label }}
					</view>
				</view>
				<view class="td actions">
					<button v-for="action in getActions(item.state)" :key="action.type" class="action-btn"
						:class="action.type" @click="showConfirm(item, action.type)">
						{{ action.label }}
					</button>
				</view>
			</view>
		</view>

		<!-- 确认弹窗 -->
		<uni-popup ref="confirmPopup" type="dialog">
			<uni-popup-dialog v-if="currentItem" type="info" :title="`确认要${currentAction.label}吗？`"
				:content="`正在操作：${currentItem.name}`" @confirm="confirmAction" @close="closeConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import {
		changeItemStatus,
		adminRestaurantItems
	} from '../../request/api.js'

	import {
		useUserStore
	} from '../../stores/user.js'

	// 状态配置
	const statusMap = {
		'-1': {
			label: '已下架',
			class: 'off'
		},
		'0': {
			label: '已售罄',
			class: 'sold-out'
		},
		'1': {
			label: '已上架',
			class: 'on'
		}
	}

	// 操作配置
	const actionConfig = {
		on: {
			label: '上架',
			targetState: 1
		},
		off: {
			label: '下架',
			targetState: -1
		},
		soldOut: {
			label: '售罄',
			targetState: 0
		}
	}

	// 模拟数据
	const menuList = ref([{
			itemId: 1,
			name: '宫保鸡丁',
			price: '38.00',
			imageUrl: '/static/dishes/1.jpg',
			state: 1
		},
		{
			itemId: 2,
			name: '鱼香肉丝',
			price: '32.00',
			imageUrl: '/static/dishes/2.jpg',
			state: 0
		}
	])

	// 弹窗相关
	const confirmPopup = ref(null)
	const currentItem = ref(null)
	const currentAction = ref({})

	// 获取可用操作
	const getActions = (state) => {
		return Object.entries(actionConfig)
			.filter(([type, config]) => config.targetState !== state)
			.map(([type, config]) => ({
				type,
				...config
			}))
	}

	// 显示确认弹窗
	const showConfirm = (item, actionType) => {
		currentItem.value = item
		currentAction.value = actionConfig[actionType]
		confirmPopup.value.open()
	}

	// 确认操作
	const confirmAction = () => {
		if (currentItem.value && currentAction.value) {
			currentItem.value.state = currentAction.value.targetState
			console.log(currentItem.value, currentAction.value, '11111111111111')
			updateState(currentItem.value.itemId, currentAction.value.targetState)
			uni.showToast({
				title: '操作成功'
			})
		}
		closeConfirm()
	}

	// 关闭弹窗
	const closeConfirm = () => {
		currentItem.value = null
		currentAction.value = {}
	}

	const init = async () => {
		const restaurantId = useUserStore().student_id
		const res = await adminRestaurantItems(restaurantId)
		console.log(res, 'res')
		menuList.value = res.items
	}

	const updateState = async (itemId, state) => {
		const restaurantId = useUserStore().student_id
		const res = await changeItemStatus(state, itemId, restaurantId)
	}

	init()
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.menu-table {
		border: 1px solid #eee;
		border-radius: 8px;
		overflow: hidden;
	}

	.table-header {
		display: flex;
		background: #f8f9fa;
		padding: 12px 0;
	}

	.th {
		flex: 1;
		text-align: center;
		font-weight: 500;
		color: #333;
	}

	.table-row {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #eee;
	}

	.td {
		flex: 1;
		padding: 8px;
		text-align: center;
	}

	.dish-img {
		width: 50px;
		height: 50px;
		border-radius: 4px;
	}

	.status-tag {
		display: inline-block;
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.status-tag.on {
		background: #f6ffed;
		border: 1px solid #b7eb8f;
		color: #52c41a;
	}

	.status-tag.off {
		background: #fff1f0;
		border: 1px solid #ffa39e;
		color: #f5222d;
	}

	.status-tag.sold-out {
		background: #fff7e6;
		border: 1px solid #ffd591;
		color: #fa8c16;
	}

	.actions {
		display: flex;
		gap: 8px;
		justify-content: center;
	}

	.action-btn {
		padding: 4px 12px;
		font-size: 12px;
		border-radius: 4px;
		color: white;
	}

	.action-btn.on {
		background: #52c41a;
	}

	.action-btn.off {
		background: #f5222d;
	}

	.action-btn.soldOut {
		background: #fa8c16;
	}
</style>